<template>
  <a-modal
    class="productManage"
    :visible="visible"
    :title="'已上架商品'"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="true"
    :confirmLoading="confirmLoading"
    width="900px"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <div class="searchBox">
      <a-input-search
        placeholder="请输入商品名称"
        style="width: 200px"
        v-model="searchParams.goodsName"
        @search="onSearch"
      />
      <a-button
        type="primary"
        style="margin-left: 10px"
        @click="onSearch"
        :loading="tableLoading"
      >
        搜索
      </a-button>
      <a-button
        style="margin-left: 10px"
        @click="resetSearch"
        :loading="tableLoading"
        >重置</a-button
      >
    </div>
    <div>
      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="dataSource"
        :rowKey="'id'"
        :pagination="pagination"
        @change="handleTableChange"
      ></a-table>
    </div>
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: "productManage",
  props: {
    goodsIdList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      selectedRows: [],
      selectedRowKeys: [],
      rowSelection: {
        selections: true,
        selectedRowKeys: [],
        onChange: (item, val) => {
          this.selectedRows = val;
          this.rowSelection.selectedRowKeys = item;
          this.selectedRowKeys = item;
        },
        // getCheckboxProps: (record) => ({
        //   props: {
        //     defaultChecked: this.selectedRowKeys.includes(record.id),
        //     disabled:
        //       this.selectedRowKeys.length >= 3
        //         ? this.selectedRowKeys.includes(record.id) === false
        //         : false,
        //   },
        // }),
        // onSelect: this.onTableTreeSelect
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共${total}条`,
      },
      dataSource: [],
      alist: [],
      columns: [
        {
          title: "商品图片",
          dataIndex: "goodsPicture",
          key: "goodsPicture",
          width: "90px",
          align: "center",
          customRender: (text, row) => {
            return <table-img src={text} />;
          },
        },
        {
          title: "标题",
          dataIndex: "goodsName",
          key: "goodsName",
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
          key: "createDate",
        },
      ],
      searchParams: {
        goodsName: "",
      },
      tableLoading: false,
    };
  },
  methods: {
    // 确定提交
    handleSubmit() {
      this.confirmLoading = true;
      const { selectedRows, alist } = this;
      // 商品提交
      let obj = {};
      const newArr = selectedRows.reduce((item, n) => {
        // eslint-disable-next-line no-unused-expressions
        obj[n.id] ? "" : (obj[n.id] = true && item.push(n));
        return item;
      }, []);
      let arr = Array.from(new Set(alist));
      let selectArr = arr.map((item) => {
        for (let i = 0, length = newArr.length; i < length; i++) {
          if (newArr[i].id == item) {
            return newArr[i];
          }
        }
      });
      let ids = [];
      selectArr.forEach((item) => {
        ids.push(item.id);
      });
      this.$emit("confirmGoodList", ids);
      this.visible = false;
      this.searchParams.goodsName = "";
    },
    // 取消
    closeModal() {
      this.visible = false;
      this.searchParams.goodsName = "";
      this.$emit("cancel", false);
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.getGoodsList();
    },
    handleSearch() {
      //  this.rowSelection()
      // this.alist = this.goodsIdList.map((item) => {
      //   return item.id;
      // });
      console.log(this.goodsIdList);
      this.alist = this.goodsIdList;
      // this.selectedRows = this.goodsIdList;
      this.selectedRows = this.goodsIdList.map((item) => {
        return {
          id: item,
        };
      });
      this.rowSelection = {
        type: "checkbox",
        selections: true,
        selectedRowKeys: this.alist,
        onChange: (item, val) => {
          this.selectedRows = this.selectedRows.concat(val);
          // this.selectedRows = val;
          this.rowSelection.selectedRowKeys = item;
          // this.alist = Array.from(new Set(this.alist.concat(item)));
          this.alist = item;
          // this.selectedRowKeys = item;
        },
        // onSelect: this.onTableTreeSelect,
        getCheckboxProps: (record) => ({
          props: {
            defaultChecked: this.alist.includes(record.id),
          },
        }),
      };
      this.getGoodsList();
    },

    async getGoodsList() {
      this.tableLoading = true;
      let res = await this.$get("goods/page", {
        current: this.pagination.current,
        size: this.pagination.pageSize,
        goodsStatus: 2,
        ...this.searchParams,
      });
      if (res && res.returnCode == 1000) {
        if (res.dataInfo != null) {
          this.dataSource = res.dataInfo.records;
          this.pagination.total = res.dataInfo.total;
        }
      }
      this.tableLoading = false;
    },
    onSearch() {
      this.getGoodsList();
    },
    resetSearch() {
      this.searchParams.goodsName = "";
      this.getGoodsList();
    },
  },
  watch: {
    visible(n) {
      if (n) {
        this.pagination.current = 1;
        this.handleSearch();
      }
    },
  },
};
</script>

<style scoped lang="less">
.searchBox {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>

